/* #ifndef APP-NVUE */
page{height: 100%; overflow: hidden}
view, scroll-view, swiper, textarea, input, button,page,navigator {box-sizing: border-box}
image{display: block}
/* #endif */

// 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
	.u-safe-area-inset-#{$d} {
		padding-#{$d}: 0;
		padding-#{$d}: constant(safe-area-inset-#{$d});  
		padding-#{$d}: env(safe-area-inset-#{$d});  
	}
}

// 方向
@each $d in left, center, end, right, between {
	.flex-#{$d} {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		@if $d == left {
			justify-content: flex-start;
		} @else if($d == center){
			justify-content: center;
		} @else if($d == between){
			justify-content: space-between;
		} @else if($d == end){
			justify-content: flex-end;
		}
	}
}

@for $i from 1 through 5 {
	.u-line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == 1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}

.flex-col{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

.flex-wrap{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-wrap: wrap;
}

.justify-between{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
}
.justify-around{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-around;
}
.flex-1{flex: 1}
.items-center{align-items: center}
.items-end{align-items: flex-end;}

.containerbox{
	/* #ifndef APP-NVUE */
	height: 100%;
	display: flex;
	min-height: 0;
	/* #endif */
	flex: 1;
	flex-direction: column;
}
.containerfill{
	/* #ifndef APP-NVUE */
	display: flex;
	min-height: 0;
	/* #endif */
	flex: 1;
	flex-direction: column;
	
}

.hidden{overflow: hidden}
.transition{transition: all 0.35s}
.relative{position: relative}
.absolute{position: absolute}
.absolute-inset{position: absolute;inset: 0}
.my-auto{margin-top: auto;margin-bottom: auto}
.mx-auto{margin-left: auto;margin-right: auto}
.m-auto{margin: auto}
.block{display: block}
.font-500{font-weight: 500}
.font-600{font-weight: 600}
.font-700{font-weight: 700}
.bold{font-weight: bold}

$margin: 'top', 'right', 'bottom', 'left';
@each $item in $margin {
	.m-#{$item} {
		margin-#{$item}: auto;
	}
}

$align: 'center', 'right', 'left';
@each $item in $margin {
	.align-#{$item} {
		text-align: #{$item};
	}
}
